import "@/styles/create-project/index.css";

const products = [
  {
    name: "Xiaomi 15S Pro",
    desc: "小米 15 周年特别设计",
    price: "5499元起",
    image: "xiaomi-15s-pro.jpg",
  },
  {
    name: "Xiaomi Civi 5 Pro",
    desc: "徕卡光学 Summilux 高端镜头",
    price: "2999元起",
    image: "civi-5-pro.jpg",
  },
  {
    name: "REDMI Turbo 4 Pro",
    desc: "Turbo 4 Pro 好看，狠能打！",
    price: "1999元起",
    oldPrice: "2199元",
    image: "turbo-4-pro.jpg",
  },
  {
    name: "Xiaomi 15 Ultra",
    desc: "徕卡 1 英寸主摄 | 徕卡 2 亿超长焦",
    price: "6499元起",
    image: "xiaomi-15-ultra.jpg",
  },
  {
    name: "REDMI Turbo 4",
    desc: "REDMI Turbo 4 好看又能打",
    price: "1699元起",
    oldPrice: "1999元",
    image: "turbo-4.jpg",
  },
  {
    name: "Redmi 14C",
    desc: "【持久续航】5160mAh 大电池",
    price: "469元起",
    image: "redmi-14c.jpg",
  },
  {
    name: "REDMI K80 Pro",
    desc: "骁龙8至尊版 | 2K 屏幕",
    price: "3299元起",
    oldPrice: "3699元",
    image: "k80-pro.jpg",
  },
  {
    name: "REDMI K80",
    desc: "第三代骁龙8 | 2K屏 | 6550mAh 大电池",
    price: "2299元起",
    oldPrice: "2499元",
    image: "k80.jpg",
  },
];

const TemplateList = () => {
  return (
    <div className="phone-list">
      {products.map((item, index) => (
        <div className="phone-card" key={index}>
          <img
            src={`assets/${item.image}`}
            alt={item.name}
            className="phone-image"
          />
          <h3 className="phone-title">{item.name}</h3>
          <p className="phone-desc">{item.desc}</p>
          <p className="phone-price">
            <span className="new-price">{item.price}</span>
            {item.oldPrice && (
              <span className="old-price">{item.oldPrice}</span>
            )}
          </p>
        </div>
      ))}
    </div>
  );
};

export default TemplateList;
